//主体类
import FileSlicingObjectFactory from './fileSlicingObjectFactory'
import './index.css'
import '../../assets/icon/iconfont.css'


export default class FileSlicingObject {
    constructor() {
        this.cudUpdataBox = null
        this.cudUpdataBoxSmall = null
        //fileList
        this.itemArry = []
        //创建工厂
        this.fileSlicingObjectFactory = new FileSlicingObjectFactory()
        //创建订阅者
        this.isOpen = this.fileSlicingObjectFactory.createObject('Subject')
        //注册观察者
        this.fileSlicingObjectFactory.createObject('Observers', [this.isOpen, this.setOpen.bind(this)])
        //调用初始化方法
        this._initUpdata()
    }
    _initUpdata() {
        var body = document.getElementsByTagName('body')[0];
        //创建节点
        this.cudUpdataBoxSmall = this.fileSlicingObjectFactory.createObject('Vnode', [`
            <div id="cudUpdataBoxSmall">
                <div class="wrapper">
                    <div class="wave"></div>
                </div>
                <span class="qiepian">切片上传中...</span>
            </div>`])
        this.cudUpdataBox = this.fileSlicingObjectFactory.createObject('Vnode', [`
            <div id="cudUpdataBox">
                        <div class="updataHeader">
                        <span>切片上传中....</span>
                        <span class="close">
                            <span class="iconfont icon-zuixiaohua"></span>
                            <span class="iconfont icon-guanbi"></span>
                        </span>
                    </div>
                    <div class="updatatitle">
                        <div class="updataItemName">文件名</div>
                        <div class="updataItemProgress">进度</div>
                    </div>
            </div>`])

        //添加节点
        body.append(this.cudUpdataBoxSmall.VNode)
        body.append(this.cudUpdataBox.VNode)
        //大小对象显示
        this.cudUpdataBox.VNode.getElementsByClassName('close')[0].getElementsByClassName('icon-zuixiaohua')[0].onclick = () => {
            this.isOpen.setState(!this.isOpen.state)
        }
        this.cudUpdataBoxSmall.VNode.onclick = () => {
            this.isOpen.setState(!this.isOpen.state)
        }
        //关闭方法
        this.cudUpdataBox.VNode.getElementsByClassName('close')[0].getElementsByClassName('icon-guanbi')[0].onclick = () => {
            body.removeChild(this.cudUpdataBox.VNode)
            body.removeChild(this.cudUpdataBoxSmall.VNode)
            //this=null
        }
        // //注册暂停继续方法
        // this.stop();
        // //推入数据
        // this.state.push(item)
        // //更改进度条
        // this.getAllInputs(0, 0)
    }
    addItem(item) {
        //创建单个文件flie上传对象
        let fileItem = this.fileSlicingObjectFactory.createObject('FileSlicingFile', [item, this.fileSlicingObjectFactory, this, this.itemArry.length])
        //添加一个FileItem
        this.cudUpdataBox.VNode.append(fileItem.VNode)
        //保存item
        this.itemArry.push(fileItem)
        return this.itemArry.length - 1
    }
    setItem(index, item) {
        this.itemArry[index].setItem(item)
    }
    setOpen(open) {
        if (open.state) {
            this.cudUpdataBox.VNode.style.display = 'block'
            this.cudUpdataBoxSmall.VNode.style.display = 'none'
        } else {
            this.cudUpdataBox.VNode.style.display = 'none'
            this.cudUpdataBoxSmall.VNode.style.display = 'flex'
        }
    }
    remove() {

    }
}

//实现上传弹窗的单例
FileSlicingObject.getInstance = (function () {
    let instance
    return function (data) {
        if (!instance) {
            instance = new FileSlicingObject(data)
        }
        return instance
    }
})()

//module.exports = FileSlicingObject